{% if site.disqus_username %}
<!-- disqus 评论框 start -->
<div class="comment">
    <div id="disqus_thread" class="disqus-thread"></div>
</div>
<!-- disqus 评论框 end -->
<!-- disqus 公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = "{{site.disqus_username}}";
    var disqus_identifier = "{{page.id}}";
    var disqus_url = "{{site.url}}{{page.url}}";

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<!-- disqus 公共JS代码 end -->
{% endif %}

{% if site.gitalk.enable %}
<!-- Gitalk 评论 start  -->
<!-- Gitalk link  -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>

<div id="gitalk-container"></div>
<script type="text/javascript">
    var gitalk = new Gitalk({
        clientID: '{{site.gitalk.clientID}}',
        clientSecret: '{{site.gitalk.clientSecret}}',
        repo: '{{site.gitalk.repo}}',
        owner: '{{site.gitalk.owner}}',
        admin: ['{{site.gitalk.admin}}'],
        distractionFreeMode: {{site.gitalk.distractionFreeMode}},
    id: 'about',
    });
    gitalk.render('gitalk-container');
</script>
<!-- Gitalk end -->
{% endif %}

{% if site.valine.enable %}
<!-- 引入Valine评论插件 https://valine.js.org/ -->
<div id="vcomments" style="margin-top: 30px;"></div>
<script>
    let pathname = window.location.pathname;
    let valine = new Valine({
        el: '#vcomments',
        appId: '{{site.valine.appId}}',
        appKey: '{{site.valine.appKey}}',
        placeholder: '{{site.valine.placeholder}}',
        path: pathname,
        avatar: 'wavatar',
        recordIP: '{{site.valine.recordIP}}',
        enableQQ: '{{site.valine.enableQQ}}',
        emojiCDN: __Ariescat_Config__.Valine.emojiCDN,
        emojiMaps: __Ariescat_Config__.Valine.emojiMaps
    });
    $(document).on('ready pjax:beforeReplace', function (event) {
        valine.setPath(pathname);
    });
</script>
<style>
    /* valine 评论框增加背景图片 */
    #vcomments textarea {
        box-sizing: border-box;
        background: url("/img/comment_bg.png") 100% 100% no-repeat;
    }
    #vcomments p {
        margin: 8px 0;
    }
    .v[data-class=v] .vcards .vcard .vquote {
        padding-left: .5em;
    }
    .v[data-class=v] .vcards .vcard .vimg {
        margin: 0 .7525em 0 0;
    }

    .v[data-class=v] .vwrap,
    .v[data-class=v] .vbtn {
        border-color: #ccc;
    }
    /*.v[data-class=v] .vcards > .vcard:last-child .vh*/
    /*.v[data-class=v] .vcards > .vcard > .vh {*/
    /*    border-bottom: 1px solid #e4e4e4;*/
    /*}*/
    .v[data-class="v"] .vcards .vcard .vquote {
        border-left: none;
    }

    /*设置评论头像旋转*/
    .v .vcards .vcard .vimg:hover {
        -webkit-animation: vimg-transform .8s linear;
                animation: vimg-transform .8s linear;
    }
    @-webkit-keyframes vimg-transform {
        0%      {-webkit-transform:rotate(0deg);}
        50%     {-webkit-transform:rotate(180deg);}
        100%    {-webkit-transform:rotate(360deg);}
    }
    @keyframes vimg-transform {
        0%      {transform:rotate(0deg);}
        50%     {transform:rotate(180deg);}
        100%    {transform:rotate(360deg);}
    }
</style>
{% endif %}


{% if site.twikoo.enable %}
<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@1.1.3-beta/dist/twikoo.all.min.js"></script>
<script>
    twikoo.init({
        envId: '{{site.twikoo.envId}}',
        el: '#tcomment',
    })
</script>
<style>
    /* twikoo 评论框增加背景图片 */
    #twikoo textarea {
        box-sizing: border-box;
        background: url("/img/comment_bg.png") 100% 100% no-repeat;
    }
</style>
{% endif %}


{% if site.waline.enable %}
<script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
<div id="waline" style="margin-top: 30px;"></div>
<span id="leancloud_visitors_id" class="leancloud_visitors">
    <em class="post-meta-item-text">当前阅读量 </em>
    <i class="leancloud-visitors-count"></i>
</span>
<script>
    $('#leancloud_visitors_id').attr('id', location.pathname)
    new Waline({
        el: '#waline',
        path: location.pathname,
        serverURL: '{{site.waline.serverURL}}',
        placeholder: '{{site.waline.placeholder}}',
        avatar: 'monsterid',
        visitor: true, // 阅读量统计
        emojiCDN: __Ariescat_Config__.Valine.emojiCDN,
        emojiMaps: __Ariescat_Config__.Valine.emojiMaps
    });
</script>
<style>
    /* valine 评论框增加背景图片 */
    #waline textarea {
        box-sizing: border-box;
        background: url("/img/comment_bg.png") 100% 100% no-repeat;
    }
    /*设置评论头像旋转*/
    .v .vcards .vcard .vimg:hover {
        -webkit-animation: vimg-transform .8s linear;
        animation: vimg-transform .8s linear;
    }
    @-webkit-keyframes vimg-transform {
        0%      {-webkit-transform:rotate(0deg);}
        50%     {-webkit-transform:rotate(180deg);}
        100%    {-webkit-transform:rotate(360deg);}
    }
    @keyframes vimg-transform {
        0%      {transform:rotate(0deg);}
        50%     {transform:rotate(180deg);}
        100%    {transform:rotate(360deg);}
    }
</style>
{% endif %}